<template>
	<el-dialog title="公共服务调用配置" :visible.sync="dialogVisible" width="800px" @close="handleClose"
		:close-on-click-modal="false">
		<div slot="title" class="dialog-header-title">
			<i class="el-icon-edit-outline"></i>
			<span>公共服务调用配置</span>
		</div>


	<el-form class="invacotiionBody" :inline="false" label-width="130px" size="mini" ref="form" :model="form" :rules="rules">
	    <div class=" smp_panel_1" style="margin-top: 0;">
					<div class="smp_panel_header">
						<div class="smp_panel_pre"></div>
						<div class="smp_panel_title">基础信息配置</div>
					</div>
		<div class="smp_panel_body" v-if="dialogVisible">


				<el-row>
						<el-col :span="24">
							<el-form-item label="ESB测试URL:" prop="proxyPath">
								<el-autocomplete placeholder="请选择或输入ESB测试URL"  style="width: 100%;" :fetch-suggestions="fetchProtocal" v-model="form.proxyPath" class="inline-input"></el-autocomplete>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="机构编码:" prop="routeOrg">
								<el-input v-model="form.routeOrg" placeholder="eg:340830.*"></el-input>
							</el-form-item>
						</el-col>
						
						</el-row>
						
						</div>
						</div>
						
						<div class=" smp_panel_1">
									<div class="smp_panel_header">
										<div class="smp_panel_pre"></div>
										<div class="smp_panel_title">内联配置</div>
									</div>
						<div class="smp_panel_body" v-if="dialogVisible">
						<el-row >
						<el-col :span="12">
							<el-form-item label="标准接入:" prop="standardAccess">
								<el-select v-model="form.standardAccess" style="width: 100%" placeholder="标准接入" >
									<el-option v-for="item in dict('SMP0015')" :key="item.itemCode" :label="item.itemName"
										:value="item.itemCode">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					<!-- 	
						<el-col :span="22">
							<el-form-item label="代理路径:" prop="proxyPath">
								<el-select v-model="form.proxyPath" style="width: 100%" filterable remote reserve-keyword
									placeholder="请输入代理路径"
									:loading="proLoading"
									@change="proChange"
									:remote-method="getproxyPathList" >
									<el-option v-for="item in proxyPathList" :key="item.sourcePath" :label="item.sourcePath" :value="item.sourcePath">
										<span style="float: left;margin-left: 3px;">{{ item.sourceName }}</span>
										<span style="float: right;margin-right: 3px;">{{ item.sourcePath }}</span>
									</el-option>
								</el-select>	
								
								
							</el-form-item>
						</el-col>
						<el-col :span="2" >
							<el-button size="mini" type="primary" plain  @click="addProxyPath" > 创建 </el-button>
						</el-col> -->
						
						<el-col :span="22">
							<el-form-item label="本地路由:" prop="localPath">
								<!-- <el-input v-model="form.proxyPath" placeholder="核心路由"></el-input> -->
								<el-select v-model="form.localPath" style="width: 100%" filterable remote reserve-keyword
									placeholder="请输入本地路由"
									:loading="proLoading"
									
									:remote-method="getLocalPathList" >
									<el-option v-for="item in localPathList" :key="item.sourcePath" :label="item.sourcePath" :value="item.sourcePath">
										<span style="float: left;margin-left: 3px;">{{ item.sourcePath }}</span>
										<span style="float: right;margin-right: 3px;">{{ item.sourceName }}</span>
									</el-option>
								</el-select>	
							</el-form-item>
						</el-col>

						<el-col :span="2" >
							<el-button size="mini" type="primary"  plain @click="addLocalPath" > 创建 </el-button>
						</el-col>
						</el-row>
						</div>
						</div>
						
						
					<div class=" smp_panel_1">
								<div class="smp_panel_header">
									<div class="smp_panel_pre"></div>
									<div class="smp_panel_title">外联配置</div>
								</div>
					<div class="smp_panel_body" v-if="dialogVisible">
					<el-row>
						<el-col :span="12">
							<el-form-item label="标准接入(外联):">
								<el-select v-model="form.oesbStandardAccess" style="width: 100%" placeholder="标准接入" >
									<el-option v-for="item in dict('SMP0015')" :key="item.itemCode" :label="item.itemName"
										:value="item.itemCode">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
									<el-form-item label="启用channel:">
										<el-select v-model="form.channel" style="width: 100%" placeholder="启用channel" >
											<el-option v-for="item in dict('SMP0015')" :key="item.itemCode" :label="item.itemName"
												:value="item.itemCode">
											</el-option>
										</el-select>
									</el-form-item>
						</el-col>
						
						<!-- <el-col :span="22">
						<el-form-item label="代理路径(外联):" prop="oesbProxyPath">
							<el-select v-model="form.oesbProxyPath" style="width: 100%" filterable remote reserve-keyword
								placeholder="请输入代理路径"
								:loading="proLoading"
								@change="proChange"
								:remote-method="getoesbproxyPathList" >
								<el-option v-for="item in oesbproxyPathList" :key="item.sourcePath" :label="item.sourcePath" :value="item.sourcePath">
									<span style="float: left;margin-left: 3px;">{{ item.sourceName }}</span>
									<span style="float: right;margin-right: 3px;">{{ item.sourcePath }}</span>
								</el-option>
							</el-select>	
							
							
						</el-form-item>
						</el-col>
						<el-col :span="2" >
							<el-button size="mini" plain type="primary"  @click="addoesbProxyPath" > 创建 </el-button>
						</el-col> -->
						
						<el-col :span="22">
							<el-form-item label="本地路由(外联):" prop="oesblocalPath">
								<!-- <el-input v-model="form.proxyPath" placeholder="核心路由"></el-input> -->
								<el-select v-model="form.oesbLocalPath" style="width: 100%" filterable remote reserve-keyword
									placeholder="请输入本地路由"
									:loading="proLoading"
									
									:remote-method="getoesbLocalPathList" >
									<el-option v-for="item in oesblocalPathList" :key="item.sourcePath" :label="item.sourcePath" :value="item.sourcePath">
										<span style="float: right;margin-right: 3px;">{{ item.sourceName }}</span>
										<span style="float: left;margin-left: 3px;">{{ item.sourcePath }}</span>
									</el-option>
								</el-select>	
							</el-form-item>
						</el-col>
					
						<el-col :span="2" >
							<el-button size="mini" plain type="primary"  @click="addoesbLocalPath" > 创建 </el-button>
						</el-col>
				</el-row>
				</div>
				</div>

			</el-form>
		</div>
		
		<add ref="add" @changePubCodes="changePubCodes"/>
		
		<addESBSource ref="addESBSource" @changeProxyPath="changeProxyPath"   @changeLocalPath="changeLocalPath"  @changeoesbProxyPath="changeoesbProxyPath"   @changeoesbLocalPath="changeoesbLocalPath"/>
		
		<span slot="footer" class="dialog-footer">
			<el-button size="mini" plain  type="primary" @click="onSubmit">
				<i class="el-icon-check"></i>
				确定</el-button>
			<el-button size="mini"  @click="closeDialog">
				<i class="el-icon-close"></i>
				取消</el-button>
		</span>
	</el-dialog>
</template>

<script>
	"use strict";
	import {
		getPubCodeList
	} from '@/api/consume.js';
	import {updateApplySystemCallInfo,getPathList} from '@/api/demand.js';
	import {getproList,getproListBysourcePath} from '@/api/source.js';
	import add from './add';
	import addESBSource from './addESBSource';

	export default {
		
		components: {
			add,
			addESBSource
		},

		data() {
			return {
				dialogVisible: false,
				proProxyPath:'',
				rules: {
					proxyPath: [{
						required: true,
						message: "代理路径不能为空",
						trigger: ['blur', 'change']
					}],
					localPath: [{
						required: true,
						message: "核心路由不能为空",
						trigger: ['blur', 'change']
					}],
					standardAccess: [{
						required: true,
						message: "是否不能为空",
						trigger: ['blur', 'change']
					}],
				},
				pubCodeListAll:[],
				proxyPathList:[],
				localPathList:[],
				oesbproxyPathList:[],
				oesblocalPathList:[],
				proLoading:false,
				sourceFolder:'',
				form: {
					proxyPath: '',
					localPath: '',
					oesbProxyPath: '',
					oesbLocalPath:'',
					standardAccess: '01',
					channel:'02',
					oesbStandardAccess:'01',
					routeOrg: '',
				},
				
			};
		},


		methods: {

			onSubmit() {
				
				this.updateApplySystemCallInfo();
			},

			init(){
			},
			
			changePubCodes(pubCode){
				getPubCodeList({"regCode":this.form.regCode}).then(response =>{
					this.pubCodeListAll = response.data.extend;
					this.form.pubCode = pubCode;
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				})
			},
			
			updateApplySystemCallInfo() {
				
				this.$refs["form"].validate(valid => {
					if (valid) {
						let row1 = {};
						Object.assign(row1, this.form);
					this.$emit("commonsubmit",this.form);
					this.dialogVisible = false;
					}
				})

			},
			
			
			showDialog() {
				this.init();
				this.dialogVisible = true;

			},

			closeDialog() {
				this.dialogVisible = false;
			},

			handleClose() {
				this.dialogVisible = false;
			},
			
			getproxyPathList(query){
				if(query!=''){
					this.proLoading = true;
					getproList({"sourcePath":query,"sourceType":"01","esbFlg":"01"}).then(response => {
					this.proxyPathList = response.data.extend;
					this.proLoading = false;
				});
				}
			},
			
			getLocalPathList(query){
				if(query!=''){
					this.proLoading = true;
					getproList({"sourcePath":query,"sourceType":"02","esbFlg":"01"}).then(response => {
					this.localPathList = response.data.extend;
					this.proLoading = false;
				});
				}
			},
			
			getoesbproxyPathList(query){
				if(query!=''){
					this.proLoading = true;
					getproList({"sourcePath":query,"sourceType":"01","esbFlg":"02"}).then(response => {
					this.oesbproxyPathList = response.data.extend;
					this.proLoading = false;
				});
				}
			},
			
			getoesbLocalPathList(query){
				if(query!=''){
					this.proLoading = true;
					getproList({"sourcePath":query,"sourceType":"02","esbFlg":"02"}).then(response => {
					this.oesblocalPathList = response.data.extend;
					this.proLoading = false;
				});
				}
			},
			
			
			
			/* proChange(val){
				this.form.proxyPath = 
				this.proxyPathList.filter(item=>{
					return item.proxyPath == val;
				})[0].proxyPath;
			} ,*/
			
			addProxyPath(){
				this.$refs.addESBSource.showDialog("01",this.sourceFolder,"01");
			},
			
			addLocalPath(){
				this.$refs.addESBSource.showDialog("02","","01");
			},
			
			addoesbProxyPath(){
				this.$refs.addESBSource.showDialog("01",this.sourceFolder,"02");
			},
			
			addoesbLocalPath(){
				this.$refs.addESBSource.showDialog("02","","02");
			},
			
			changeProxyPath(sourcePath){
				getproList({"sourcePath":sourcePath,"sourceType":"01","esbFlg":"01"}).then(response =>{
					this.proxyPathList = response.data.extend;
					this.form.proxyPath = sourcePath
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				})
			},
			
			
			changeLocalPath(sourcePath){
				getproList({"sourcePath":sourcePath,"sourceType":"02","esbFlg":"01"}).then(response =>{
					this.localPathList = response.data.extend;
					this.form.localPath = sourcePath
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				})
			},
			
			changeoesbProxyPath(sourcePath){

				getproList({"sourcePath":sourcePath,"sourceType":"01","esbFlg":"02"}).then(response =>{
					this.oesbproxyPathList = response.data.extend;
					this.form.oesbProxyPath = sourcePath;
					
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				})
			},
			
			
			changeoesbLocalPath(sourcePath){
				getproList({"sourcePath":sourcePath,"sourceType":"02","esbFlg":"02"}).then(response =>{
					this.oesblocalPathList = response.data.extend;
					this.form.oesbLocalPath = sourcePath;
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				})
			},
			
			
			fetchProtocal(queryString,cb){
				getPathList({proxyPath:queryString}).then(response =>{
					/* this.proProxyPath = response.data.extend;
					var protocals = this.proProxyPath;
					var protocals1  = queryString? protocals.filter(item=>{
						return item.value.indexOf(queryString)>-1;
					}):protocals;
					cb(protocals1); */
					cb(response.data.extend);
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				})
			
			
			},


		},

	}
</script>

<style>
	
	.invacotiionBody .el-input--mini .el-input__inner{
		height: 27px;
		line-height:28px;
	}
	
</style>
